<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="fanghu">
      <div class="fanghu_title">防护</div>
      <div class="fanghu_content">
        在防护战术领域，重点考虑识别战术后，围绕数据资产展开的主动、被动安
        全保护技术手段，故对于未直接作用于数据本身的保护技术手段暂未收录
        14。
        <br>
        注释#14:例如，网络欺骗防御技术在网络安全领域具有较高价值，但由于技术非“以数据为中心“，故本文不作收录。
      </div>
    </div>
    <!-- 二级标题 -->
    <div class="fanghu2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>
    <!-- 评论区 -->
    <!-- <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
          style="color: red; cursor: pointer"
          v-if="item.username === commentForm.username"
          @click="del(item.id)"
          >删除</span
        >
      </div>
      <div>
        <el-input
        class="comment-input"
          type="textarea"
          v-model="commentForm.content"
          placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment">评论</el-button>

      <el-message
        v-if="errorMessage"
        :type="'error'"
        :message="errorMessage"
      ></el-message>
    </div> -->
    <Comment />

  </div>
</template>
  
  <script>
import request from "@/utils/request.js";
import Comment from "@/component/comment/index.vue";
import { ref } from "vue";
const drawer = ref(false);

export default {
  components:{
    Comment
  },
  data() {
    return {
      tableData: [
        {
          title: "存储加密",
          content: "",
          basis:
            "在存储介质主程序启动前加载加密程序，实现在数据写入存储介质前将数据\n" +
              "进行加密，实现数据的存储加密，在存储介质加载数据到内存前进行数据解密，\n" +
              "实现数据的解密使用。",
          main:"利用密码技术将数据转换成密文存储后，可防止存储环节中的泄密。",
        },

        {
          title: "数据脱敏技术",
          basis:
            "数据脱敏又称为数据漂白、数据去隐私话或数据变形。是指从原始环境向目\n" +
              "标环境进行敏感数据交换的过程中，通过一定方法消除原始环境数据中的敏感信\n" +
              "息，并保留目标环境业务所需的数据特征或内容的数据处理过程。既能够保障数\n" +
              "据中的敏感数据不被泄露又能保证数据可用性的特性，使得数据脱敏技术成为解\n" +
              "决数据安全与数据经济发展的重要工具。\n" +
              "[37]",
          main: "数据脱敏主要包括动态脱敏技术、静态脱敏技术、隐私保护技术等。",
        },
        {
          title: "隐私计算技术",
          basis:
            "隐私计算是指在保护数据本身不对外泄露的前提下实现数据分析计算的一\n" +
              "类信息技术，是数据科学、密码学、人工智能等多种技术体系的交叉融合。",
          main: "从技术实现原理上看，隐私计算主要分为密码学和可信硬件两大领域。密码\n" +
              "学技术目前以多方安全计算等技术为代表；可信硬件领域则主要指可信执行环\n" +
              "境；此外，还包括基于以上两种技术路径衍生出的联邦学习等相关应用技术。",
        },
        {
          title: "身份认证技术",
          basis:
            "身份认证技术，是指对实体和其所声称的身份之间的绑定关系进行充分确认\n" +
              "的过程，目的是为了解决网络通信双方身份信息是否真实的问题，使各种信息交\n" +
              "流可以在一个安全的环境中进行。身份认证技术可以提供关于某个人或某个事物\n" +
              "身份的保证，这意味着当某人（或某事）声称具有一个身份时，认证技术将提供\n" +
              "某种方法来证实这一声明是正确的。",
          main: "在网络安全，乃至数据安全中，身份认证技术作为第一道，也是极其重要的\n" +
              "一道防线，有着重要地位。可靠的身份认证技术可以确保信息只被正确的“人”\n" +
              "访问。身份认证技术的发展，经历了从软件实现到硬件实现，从单因子认证到多\n" +
              "因子认证，从静态认证到动态认证的过程。目前比较流行的身份认证技术包括口\n" +
              "令认证技术、无口令认证、生物特征认证等。",
        },
        {
          title: "访问控制技术",
          basis:
            "访问控制（Access Control）指系统对用户身份及其所属的预先定义的策略\n" +
              "组限制其使用数据资源能力的手段。通常用于系统管理员控制用户对服务器、目\n" +
              "录、文件等网络资源的访问。访问控制的主要目的是限制访问主体对客体的访问，\n" +
              "从而保障数据资源在合法范围内得以有效使用和管理。",
          main: "访问控制的功能性实现一般需要两步：一是识别和确认访问系统的用户；二\n" +
              "是利用技术手段决定该用户可以对某一系统资源进行何种类型及权限的访问。技\n" +
              "术实现方式可分为网络访问控制、权限管理控制、风险操作控制和数据访问控制\n" +
              "等衍生技术。",
        },
        {
          title: "数字签名技术",
          basis:
              "数字签名（Digital S ignature），签名者使用私钥对待签名数据的杂凑值\n" +
              "做密码运算得到的结果，该结果只能用签名者的公钥进行验证，用于确认签名数\n" +
              "据的完整性、签名者身份的真实性和签名行为的抗抵赖性。【来源：\n" +
              "[41]\n" +
              "GM/Z4001-2013,2.113】",
          main: "数字签名使用了公钥加密领域的技术实现，用于鉴别数字信息。一套数字签\n" +
              "名通常定义两种互补的运算，一个用于签名，另一个用于验证。每种公钥加密体\n" +
              "系都能设计实现相应的数字签名，代表性的有 RSA 签名和 DSA 签名。",
        },
        {
          title: "DLP 技术",
          basis:
              "DLP 技术，即数据泄露防护技术，主要核心是通过识别结构化数据和非结构\n" +
              "化等数据资产，根据安全策略执行相关动作，以实现数据资产保护。",
          main: "DLP 技术的内容识别方法别包括关键字、正则表达式、文档指纹、向量学习\n" +
              "等；策略包括拦截、提醒、记录等。DLP 技术可部署在终端、电子邮件、云和网\n" +
              "络等各种出口通道上，能够为其提供 DLP 功能的工具包括邮件安全和邮件网关\n" +
              "（SEG）解决方案、Web 安全网关（SWG）、云访问安全代理（CASB）、终端保护\n" +
              "平台以及防火墙等。",
        },
        {
          title: "数据销毁技术",
          basis:
              "数据销毁是指将数据存储介质上的数据不可逆地删除或将介质永久销毁，从\n" +
              "而使数据不可恢复、还原的过程。",
          main: "数据销毁作为数据生命周期中的最后一环，其目的是使得被删除的敏感数据\n" +
              "不留踪迹、不可恢复，主要分为硬销毁和软销毁。",
        },
        {
          title: "云数据保护技术",
          basis:
              "数据销毁是指将数据存储介质上的数据不可逆地删除或将介质永久销毁，从\n" +
              "而使数据不可恢复、还原的过程。",
          main: "数据销毁作为数据生命周期中的最后一环，其目的是使得被删除的敏感数据\n" +
              "不留踪迹、不可恢复，主要分为硬销毁和软销毁。",
        },
        {
          title: "大数据保护技术",
          basis:
              "大数据保护技术指在大数据处理环境下，针对大数据自身安全特性，施加安\n" +
              "全增强的数据保护技术。",
          main: "常见的大数据保护技术包含数据隔离、分层访问、列数据授权、批量授权等。",
        },


      ],
      comments: [],
      pageId: 1,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);
      console.log(comments);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
            .delete(`/comments/${commentId}`)
            .then(() => {
              this.$message.success("评论删除成功");
              this.load(); // 重新加载评论列表
            })
            .catch((error) => {
              console.error("删除评论失败:", error);
              this.$message.error("删除评论失败");
            });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
        .get("/comments/" + this.pageId)
        .then((res) => {
          this.comments = res.data;
        })
        .catch((error) => {
          console.error("加载评论失败:", error);
        });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
        .post("/comments/" + this.pageId, {
          content: this.commentForm.content,
          username: this.commentForm.username,
          userId: this.commentForm.userId,
        })
        .then(() => {
          this.$message.success("评论成功");
          this.commentForm.content = "";
          this.load();
        })
        .catch((error) => {
          console.error("提交评论失败:", error);
          this.$message.error("提交评论失败");
        });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>
  
  <style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .fanghu {
    width: 100%;
    padding: 30px;
    .fanghu_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .comments-section{
    padding: 20px;
    margin-lfanghu_contenteft: 20px;
    // 评论列表样式
    .comment-item{
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input{
      margin: 15px 0;
    }
    .comment-button{
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
    .fanghu_explain{
      text-indent: 2em;
      padding-left: 100px;
    }
  }

}
</style>;
  